<template>
	<view class="sentTrade">
		<!-- 求购 -->
		<view class="container">
			<view class="w100 pb10 bgF fixhead"><u-tabs bar-width="70" :list="list" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs></view>
		</view>
		<!-- <view class="container" style="height: 92rpx;"></view> -->
		<view class="container" style="height: 1px;background: #f3f3f3;"></view>
		<!-- 求购幸运币 -->
		<view v-if="current == 0">
			<view class="container flex-xy">
				<view class="w90">
					<u-form :model="form" ref="uForm" label-width="150rpx" label-position="left">
						<u-form-item label="交易单价" prop="oneMoney">
							<u-input v-model="form.oneMoney" type="number" placeholder="请输入矿币交易单价" />
							<view slot="right">矿币</view>
						</u-form-item>
						<u-form-item label="出售数量" prop="num">
							<u-input v-model="form.num" type="number" placeholder="请输入出售数量" />
							<view slot="right">数量</view>
						</u-form-item>
						<u-form-item label="买家支付" prop="allMoney">
							<u-input v-model="form.allMoney" placeholder="0.00" disabled />
							<view slot="right">矿币</view>
						</u-form-item>
						<u-form-item label="支付密码" prop="password">
							<u-input v-model="form.password" placeholder="支付密码"  type="password"  />
							<view slot="right">PASSWORD</view>
						</u-form-item>
					</u-form>

					<u-button @click="submit" type="primary" :ripple="true" class="mt30 mb50">提交</u-button>
				</view>
			</view>
		</view>
		<!--  求购矿币  -->
		<view v-if="current == 1">
			<view class="container flex-xy">
				<view class="w90">
					<u-form :model="form" ref="uForm" label-width="150rpx" label-position="left">
						<u-form-item label="交易单价" prop="oneMoney">
							<u-input v-model="form.oneMoney" type="number" placeholder="请输入幸运币交易单价" />
							<view slot="right">幸运币</view>
						</u-form-item>
						<u-form-item label="出售数量" prop="num">
							<u-input v-model="form.num" type="number" placeholder="请输入出售数量" />
							<view slot="right">数量/10~500个</view>
						</u-form-item>
						<u-form-item label="买家支付">
							<u-input v-model="form.allMoney" placeholder="0.00" disabled />
							<view slot="right">幸运币</view>
						</u-form-item>
						<u-form-item label="支付密码" prop="password">
							<u-input v-model="form.password" placeholder="支付密码" type="password" />
							<view slot="right">PASSWORD</view>
						</u-form-item>
					</u-form>

					<u-button @click="submit" type="error" :ripple="true" class="mt30 mb50">提交</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rules: {
				oneMoney: [
					{
						required: true,
						message: '请输入交易单价',
						trigger: ['blur', 'change']
					}
				],
				num: [
					{
						required: true,
						message: '请输入交易数量',
						trigger: ['blur', 'change']
					}
				],
				password: [
					{
						required: true,
						message: '请输入支付密码',
						trigger: ['blur', 'change']
					},
					// 6-8个字符之间的判断
					{
						min: 6,
						max: 6,
						message: '长度是六位'
					}
				]
			},
			form: {
				oneMoney: '',
				num: '',
				allMoney: '0.00',
				password: ''
			},
			list: [
				{
					name: '出售幸运币'
				},
				{
					name: '出售矿币'
				}
			],

			current: 0 // tabs组件的current值，表示当前活动的tab选项
		};
	},
	watch: {
		form: {
			//深度监听，可监听到对象、数组的变化
			handler(newValue, oldValue) {
				if (!!Number(newValue.oneMoney) && !!Number(newValue.num)) {
					this.form.allMoney = Number(newValue.oneMoney) * Number(newValue.num);
				} else {
					this.form.allMoney = '0.00';
				}

				if (this.current == 1 && Number(newValue.num) >= 500) {
					this.form.num = String(500);
				}
			},
			deep: true
		}
	},
	methods: {
		clear() {
			this.form = {
				oneMoney: '',
				num: '',
				allMoney: '0.00',
				password: ''
			};
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.current = index;
			this.clear();
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (!!this.form.password) {
						this.passwordCheck(this.form.password)
							.then(() => {
								// 密码校验成功
								// /mobileUser/purchase/release
								// {
								//         "userId" : "2",              用户Id
								//         "password" : "097129",       交易密码
								//         "type" : 1,                  交易类型  2(kb兑换成幸运币)
								//         "money" : 10,                单笔价格
								//         "count" : 5,                 交易数量
								//         "total" : 50                 总金额
								// }

								if (this.current == 0) {
									let getObj = {
										url: '/mobileUser/purchase/release',
										data: {
											userId: uni.getStorageSync('y-userId'),
											// password: this.form.password,
											token: uni.getStorageSync('y-token'),
											type: 1,
											money: this.form.oneMoney,
											count: this.form.num,
											total: this.form.allMoney
										}
									};
									this.postRequest(getObj)
										.then(res => {
											if (res.data.code == 200) {
												uni.showToast({
													title: res.data.msg,
													mask: true,
													icon: 'success',
													duration: 500,
													success: () => {
														setTimeout(() => {
															uni.navigateBack({
																delta: 1
															});
														}, 500);
													}
												});
											} else {
												uni.showToast({
													title: res.data.msg,
													mask: true,
													icon: 'none',
													duration: 500
												});
												this.clear();
											}
										})
										.catch(err => {
											this.clear();
										});
								}
								// {
								//         "userId" : "2",              用户Id
								//         "password" : "097129",       交易密码
								//         "type" : 1,                  交易类型  1(幸运币兑换成kb)
								//         "money" : 10,                单笔价格
								//         "count" : 5,                 交易数量
								//         "total" : 50                 总金额
								// }
								if (this.current == 1) {
									if (Number(this.form.num) <10){
										uni.showToast({
											title: '数量10-500',
											mask: true,
											icon: 'none',
											duration: 500,
											success: () => {
												setTimeout(() => {
													this.form.num = String(10)
												}, 500);
											}
										});
									}else{
										let getObj = {
													url: '/mobileUser/purchase/release',
													data: {
														userId: uni.getStorageSync('y-userId'),
														// password: this.form.password,
														token: uni.getStorageSync('y-token'),
														type: 2,
														money: this.form.oneMoney,
														count: this.form.num,
														total: this.form.allMoney
													}
												};
												this.postRequest(getObj)
													.then(res => {
														if (res.data.code == 200) {
															uni.showToast({
																title: res.data.msg,
																mask: true,
																icon: 'success',
																duration: 500,
																success: () => {
																	setTimeout(() => {
																		uni.navigateBack({
																			delta: 1
																		});
																	}, 500);
																}
															});
														} else {
															uni.showToast({
																title: res.data.msg,
																mask: true,
																icon: 'none',
																duration: 500
															});
															this.clear();
														}
													})
													.catch(err => {
														this.clear();
													});
											}
										
									}
							})
							.catch(() => {
								//密码校验失败
							});
					}
				} else {
					// console.log('验证失败');
				}
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
// .fixheadf {
// 	position: fixed;
// 	left: 0;
// 	top: 88rpx;
// 	z-index: 9999;
// }
</style>
